<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>酒店详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>


    <style>
        .usefulClick {
            color: #F32D27;
        }

        /*.container{
            width: 1000px;
        }*/
        .commentbox {
            width: 100%;
            margin: 20px auto;
        }

        .replybox {
            width: 300px
        }

        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }

        .comment-list {
            width: 900px;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }

        .comment-list .comment-info {
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }

        .comment-list .comment-info header {
            width: 10%;
            position: absolute;
        }

        .comment-list .comment-info header img {
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }

        .comment-list .comment-info .comment-right {
            padding: 5px 0px 5px 11%;
        }

        .comment-list .comment-info .comment-right h3 {
            margin: 5px 0px;
        }

        .comment-list .comment-info .comment-right .comment-content-header {
            height: 25px;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span {
            padding-right: 2em;
            color: #aaa;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span.reply-btn, .send, .reply-list-btn {
            cursor: pointer;
        }

        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply {
            border-bottom: 1px dashed #ccc;
        }

        .comment-list .comment-info .comment-right .reply-list .reply div span {
            padding-left: 10px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply p span {
            padding-right: 2em;
            color: #aaa;
        }

    </style>

    <script>
        $(function () {
            //获取地址栏上的id值
            var params = getParams();
            if (params.id) {
                //全部游记点击某一篇游记数据回显
                $.get("/hotel/" + params.id, function (data) {
                    console.log(data);
                    var list = {'list': data}
                    console.log(list);
                    $(".travels").renderValues(list, {
                        setPerson: function (ele, val) {
                            var html = "";
                            if (val == 1) {
                                html = "";
                            } else if (val == 2) {
                                html = "和父母";
                            } else if (val == 3) {
                                html = "和朋友";
                            } else if (val == 4) {
                                html = "和同事";
                            } else if (val == 5) {
                                html = "和爱人";
                            } else {
                                html = "和同事";
                            }
                            $(ele).html(html);
                        }
                    });
                })


            }

        })
    </script>
</head>


<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="list.coverUrl">
    <div class="container">
        <h6 class="title" render-html="list.name"></h6>
        <small>
            <!--发布时间-->
            地址:<span render-html="list.address"></span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span>价格:</span>
                    <span render-html="list.price">价格</span>
                    <br>
                    <span>价格:</span>
                    <span render-html="list.hotelTypeName">价格</span>
                </small>
            </div>
        </div>
    </div>
    <div class="content" render-html="list.comment">
    </div>

</div>


</body>


</html>